<template>
  <div>
    <h1 class="title">{{ artInfo.title }}</h1>

    <div class="info">
      <span>作者：{{ artInfo.nickname }}</span>
      <span>发布时间：{{ artInfo.pub_date | dateFormat }}</span>
      <span>所属分类： {{ artInfo.cate_name }}</span>
      <span>状态：{{ artInfo.state }}</span>
    </div>

    <el-divider></el-divider>

    <img
      v-if="artInfo.cover_img"
      :src="'http://www.liulongbin.top:3008' + artInfo.cover_img"
      alt=""
    />
    <img
      v-else
      src="http://ihrm-java.itheima.net/static/img/head.b6c3427.jpg"
      alt=""
    />
    <div>{{ artInfo.title }}</div>
  </div>
</template>

<script>
export default {
  name: 'ArtInfo',
  props: {
    artInfo: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}

.info {
  font-size: 12px;
  span {
    margin-right: 20px;
  }
}
</style>
